<include file="Public/head"/>
<link type="text/css" rel="stylesheet" href="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.css" />
<script src="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.js" type="text/javascript"></script>
<script src="{:get_style_cdnurl()}paimai/yunying/js/city.js" type="text/javascript"></script>
<script src="{:get_style_cdnurl()}paimai/yunying/js/webuploader.min.js"></script>
<!--<script src="{:get_style_cdnurl()}paimai/yunying/js/upload.js"></script>-->
<style>
    .xuanzhe ul li .menDao1{width:300px;}
    .xuanzhe ul li .menDao1 a{display:block;background:#cecece;color:#303030;float:left;width:36px; text-align:center;height:20px; line-height:20px; cursor:pointer;}
    .xuanzhe ul li .menDao1 .menHover{ background:#20ab4f;color:#fff;}
</style>
<include file="Public/common_header"/>
<div class="mian">
    <include file="Public/sidebar" menu="xtgl."/>
    <div class="mianR">
        <div class="listBox">
            <h3 class="cha">分配权限</h3>
            <div class="broker">
                <h4>基本信息</h4>
                <ul class="broker-area clearfix">
                    <input type="hidden" name="group_id" value="{$Think.GET.group_id}" />
                    <li><span>分组名称：</span><span class="broker-text">{$group_info.title}</span></li>
                    <li><span>分组描述：</span><span class="broker-text">{$group_info.remark}</span></li>
                </ul>
            </div>
        </div>

            <div class="associated-store clearfix">
                <h4>分配权限</h4>
                <div class="associated-left">
                    <h5>公司员工</h5>
                    <div class="store-search">
                        <input type="text" value="" id="search_key" name="search_key" value="{I()}" placeholder="账号、姓名、电话" />
                        <input type="button" id="search" value="搜索" /></div>
                        <ul class="associated-first">

                        </ul>
                    <ul class="associated-last"></ul>
                </div>
                <div class="associated-right">
                    <h5>已添加{$name}</h5>
                    <ul id="jurisdiction">
                        <foreach name="emp_List" item="emp">
                            <li data-id="{$emp.emp_id}">
                                <span class="renew1">{$emp.real_name}</span>
                                <em class="renew1">{$emp.username}</em>
                                <em class="renew1">{$emp.mobile}</em>
                                <i class="delete-btn">删除</i>
                            </li>
                        </foreach>
                    </ul>
                    <input type="hidden" value="" id="fids">
                    <input type="hidden" value="" id="add-text" />
                    <input type="hidden" value="" id="del-text" />
                </div>
            </div>
            <div class="yongBtn clearfix">
                <input type="hidden" name="re_auction_type" value="">
                <input type="hidden" name="first_money" value="">
                <input type="button" value="确认" name="queding" class="queding" id="queding">
                <input type="button" id="cancel" class="quxiao" value="取消">            </div>
        </div>
</div>
<div class="yunBei"></div>
<script type="text/javascript">
    var role=[];
    var role1=[];
    $(function(){
        $(".associated-last").hide();
        var oLH=$(".associated-first li").outerHeight(true);

        if(($(".associated-first li").length)*oLH>320){
            $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }

        var oLH2=$(".associated-right ul li").outerHeight(true);
        if(($(".associated-right ul li").length)*oLH2>350){
            $(".associated-right ul").css("overflow-y","scroll");
        }else{
            $(".associated-right ul").css("overflow-y","auto");
        }
        //点击搜索获取输入框的内容与下面的li里的内容匹配，匹配好的li插入
        //associated-last.ul里面并且显示，associated-first.ul隐藏
        $("#search").on("click",function(){
            search();return;
        })

        // 添加
        $(".associated-first").on("click","li i.add-btn",function(){
            var oS=$(this).parent("li").children();
            var realName = $(oS[0]).html(); // 真实姓名
            var username = $(oS[1]).html(); // 用户名
            var mobile = $(oS[2]).html(); // 手机号
            var iD=$(this).parent("li").attr("data-id");
            $(this).parent("li").remove();
            $(".associated-right ul").prepend("<li data-id="+iD+"><span class='renew1'>"+realName+"</span>" +
                    "<em class='renew1'>"+username+"</em><em class='renew1'>"+mobile+"</em><i class='delete-btn'>删除</i></li>");
            role.push(iD);
            $("#add-text").val(role)
            if(($(".associated-first li").length)*oLH>320){
                $(".associated-first").css("overflow-y","scroll");
            }else{
                $(".associated-first").css("overflow-y","auto");
            }
        })

        // 删除
        $(".associated-right ul").on("click","li i.delete-btn",function(){
            var oS=$(this).parent("li").children();
            var realName = $(oS[0]).html(); // 真实姓名
            var username = $(oS[1]).html(); // 用户名
            var mobile = $(oS[2]).html(); // 手机号
            //var oS1=$(this).parent("li").find("span").html();
            var iD1=$(this).parent("li").attr("data-id");
            $(this).parent("li").remove();
            $(".associated-first").prepend("<li data-id="+iD1+"><span class='renew1'>"+realName+"</span>" +
                    "<em class='renew1'>"+username+"</em><em class='renew1'>"+mobile+"</em><i class='add-btn'>添加</i></li>");
            role1.push(iD1);

        })


        $("#queding").on("click",function () {
            $(this).attr('disabled',true);
            submit_alert();
        })
        
        $("body").on("click",".determine",function () {
            submit_alert();
            $(".chenggong1").remove();
        })

        $("body").on("click",".cancel",function () {
           window.location.href='/Emp/group_list';
        })
    })


    function submit_alert() {
        a = role;
        b = role1;
        var addArr = array_difference(a, b);
        var delArr = array_difference(b, a);
        var group_id = "<?php echo $group_id;?>";
        var param = {
            'group_id':group_id,
            'add_arr':addArr,
            'del_arr':delArr,
        };
        $.post('/Emp/saveEmpGroupRelation',param,function(data){
            console.log(data);
            if(data.code != 200){
                shibai_alert(data.msg,1500);
            }else {
                btn_alert("操作成功",1500,function () {
                    //window.close();
                    window.location.href='/Emp/group_list';
                });
            }
        },'json');
        console.log("Add:", addArr);
        console.log("Del:", delArr);
    }
    
    function search() {
        var search_key = $('#search_key').val();
        if(search_key == '' || search_key == null){
            shibai_alert("账号、姓名、电话不能为空!",200);
            return;
        }

        var param = {
            'search_key':search_key,
            "group_id" : "<?php echo $group_id;?>",
        };
        $.post('/Emp/searchEmp', param, function (result) {
            //var data = eval(data);
            $(".associated-first").html("");
            if(result.data){
                for(var i=0 ;i< result.data.length;i++){
                    if(result.data[i]['is_add']){
                        $(".associated-first").append("<li data-id="+result.data[i]['emp_id']+"><span class='renew1'>"+result.data[i]['real_name']+"</span>" +
                                "<em class='renew1'>"+result.data[i]['username']+"</em><em class='renew1'>"+result.data[i]['mobile']+"</em><i>已添加</i></li>")
                    }else{
                        $(".associated-first").append("<li data-id="+result.data[i]['emp_id']+"><span class='renew1'>"+result.data[i]['real_name']+"</span>" +
                                "<em class='renew1'>"+result.data[i]['username']+"</em><em class='renew1'>"+result.data[i]['mobile']+"</em><i class='add-btn'>添加</i></li>")
                    }
                }
            }
        },'json');
    }

    $("#cancel").on("click",function(){
        if(role.length!=0||role1.length!=0){
            $(".yunBei").css("display","block");
            confirm_alert("您已对数据进行了修改,是否需要保存!");
        }else{
            window.location.href='/Emp/group_list';
            //window.close();
        }
    })


    function array_remove_repeat(a) { // 去重
        var r = [];
        for(var i = 0; i < a.length; i ++) {
            var flag = true;
            var temp = a[i];
            for(var j = 0; j < r.length; j ++) {
                if(temp === r[j]) {
                    flag = false;
                    break;
                }
            }
            if(flag) {
                r.push(temp);
            }
        }
        return r;
    }

    function array_difference(a, b) { // 差集 a - b
        var clone = a.slice(0);
        for(var i = 0; i < b.length; i ++) {
            var temp = b[i];
            for(var j = 0; j < clone.length; j ++) {
                if(temp === clone[j]) {
                    clone.splice(j,1);
                }
            }
        }
        return array_remove_repeat(clone);
    }


</script>
<include file="Public/foot" />